<style type="text/less" lang="less" scoped>
@import url("./index.less");
</style>

<template>
  <el-container>
    <el-aside width="261px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">分类</span>
        </div>

        <div class="ps-panel-body">
          <el-tree
            :data="labels"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :props="{ label: 'label_name' }"
            @node-click="treeNodeClick"
          ></el-tree>
          <!--<el-menu :default-active="nodeTypes[0].node" class="el-menu-vertical">-->
          <!--<el-menu-item v-for="item of nodeTypes" :index="item.node" :key="item.node" @click="init(item.node)">{{item.node_name}}</el-menu-item>-->
          <!--</el-menu>-->
        </div>
      </div>
    </el-aside>
    <el-main class="content-main">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">列表</span>
          <span class="query">
            <el-form inline :model="queryForm" size="mini">
              <el-form-item label="名称：">
                <el-input
                  v-model="queryForm['名称']"
                  placeholder="名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="别名：">
                <el-input
                  v-model="queryForm['别名']"
                  placeholder="别名"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
              </el-form-item>
            </el-form>
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="nodeData"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column
              prop="编号"
              label="编号"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="名称"
              label="名称"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="国家"
              label="国家"
              width="100"
            ></el-table-column>
            <el-table-column prop="别名" label="别名" class-name="inlinetxt">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div style="max-width: 500px">
                    <el-tag
                      size="medium"
                      v-for="(item, i) of scope.row['别名']"
                      :key="i"
                      style="margin-bottom: 10px"
                      >{{ item }}</el-tag
                    >
                  </div>
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      size="medium"
                      v-for="(item, i) of scope.row['别名']"
                      :key="i"
                      >{{ item }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="jump"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog title="编辑别名" :visible.sync="dialogVisible" width="450px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称：">{{ form["名称"] }}</el-form-item>
        <el-form-item
          label="别名："
          prop="别名"
          :rules="{ required: true, message: '不能为空' }"
        >
          <el-input type="textarea" v-model="form['别名']" rows="8"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "alias",
  data: function () {
    return {
      dialogVisible: false,
      queryForm: {
        名称: "",
        别名: "",
      },
      form: {
        编号: "",
        名称: "",
        别名: "",
      },
      labels: [],
      currNodeType: "",
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      nodeData: [],
    };
  },
  methods: {
    init(nodeType) {
      this.currNodeType = nodeType;
      this.jump(1);
    },
    query() {
      this.jump(1);
    },
    jump(i) {
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/alias/queryNodesName",
        method: "get",
        data: {
          nodeLabel: this.currNodeType,
          name: this.queryForm["名称"],
          alias: this.queryForm["别名"],
          page: i,
          number: this.paginations.pageSize,
        },
        succeed: (res) => {
          this.nodeData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
    edit(row) {
      this.form["编号"] = row["编号"];
      this.form["名称"] = row["名称"];
      this.form["别名"] = row["别名"].join("\n");
      this.dialogVisible = true;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const aliasArr = this.form["别名"].split("\n");
          let alias = "";

          for (const item of aliasArr) {
            const name = item.replace(/(^\s*)|(\s*$)/g, "");
            if (name) {
              alias += "#~#" + name;
            }
          }
          alias = alias.substr(3);
          this.$store.dispatch("ajaxSetting", {
            //   this.$store.dispatch("ajax", {
            url: "/api/alias/saveNodesName",
            method: "put",
            data: {
              id: this.form["编号"],
              alias: alias,
              nodeLabel: this.currNodeType,
            },
            succeed: () => {
              this.jump();
              this.$message.success("保存成功");
              this.dialogVisible = false;
            },
          });
        }
      });
    },
    treeNodeClick(data) {
      this.init(data.label_name);
    },
  },
  mounted: function () {
    this.$store.dispatch("ajaxSetting", {
      // this.$store.dispatch("ajax", {
      url: "/api/converter/getLabelColumn",
      method: "get",
      succeed: (res) => {
        this.labels = res.rows;
      },
    });
  },
};
</script>
